<template>
  <view>
    <uv-modal
      ref="modal"
      :title="title"
      :width="width"
      :asyncClose="true"
      :showCancelButton="showCancelButton"
      :closeOnClickOverlay="closeOnClickOverlay"
      @confirm="confirm"
      @cancel="cancel"
    >
      <template #default>
        <view class="modal-content">
          <slot name="content"></slot>
        </view>
      </template>
    </uv-modal>
  </view>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    title: {
      type: String,
      default: '',
    },
    width: {
      type: [String, Number],
    },
    showCancelButton: {
      type: Boolean,
      default: true,
    },
    closeOnClickOverlay: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    open() {
      this.$refs.modal.open()
    },
    closeLoading() {
      this.$refs.modal.closeLoading()
    },
    confirm() {
      console.log('确定按钮被点击')
      this.$emit('confirm')
      // this.close();
    },
    cancel() {
      console.log('取消按钮被点击')
      this.$emit('cancel')
      this.close()
    },
    close() {
      this.$refs.modal.close()
    },
  },
}
</script>

<style scoped>
.modal-content {
  padding: 20rpx;
}
</style>
